<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 瀑布式布局</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .waterfall {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .item {
        position: absolute;
        box-sizing: border-box;
        padding: 10px;
        transition: top, left .25s linear;
    }

    .item-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px;
        height: auto;
        font-size: 20px;
        color: #686868;
        box-sizing: border-box;
        border: 1px solid #ccc;
    }

    .clearfix {
        zoom: 1;
    }

    .clearfix::after {
        content: "";
        display: block;
        overflow: hidden;
        clear: both;
        height: 0;
    }

    img {
        height: 100%;
        width: 100%;
    }
</style>

<body>
    <div class="waterfall" id="app">
        <!--文本--->
        <div class="item" v-for="(item,index) in list" :key="index" :ref=`refValue${index}`>
            <div class="item-content">
                {{item}}
            </div>
        </div>

        <!--图片-->
        <!-- <div class="item" v-for="(item,index) in list" :key="index" :ref=`refValue${index}`>
      <div class="item-content">
        <img :src="item" :alt="index" :title="index">
      </div>
    </div> -->
    </div>

</body>
<script src="./vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                list: [],
                imgList: [
                    "./1-1.jpg",
                    "./1-2.jpg",
                    "./1-3.jpg",
                    "./1-4.jpg",
                    "./1-5.jpg",
                    "./1-6.jpg",
                    "./1-7.jpg",
                    "./2-1.jpg",
                    "./2-2.jpg",
                    "./2-3.jpg",
                    "./2-4.jpg",
                    "./2-5.jpg",
                    "./2-6.jpg",
                    "./2-7.jpg",
                ],
                textList: [
                    "1.三月到大理赏樱花不远不近,在部队那些日子被遗忘,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光v,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "2.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光",
                    "3.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆",
                    "4.三月到大理赏樱花不远不近,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光.才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "5.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队",
                    "6.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的",
                    "7.三月到大理赏樱花不远不近,又近",
                    "8.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "9.三月到大理赏樱花不远不近，才是最好离余生，请带上自己的回忆",
                    "3.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆",
                    "4.三月到大理赏樱花不远不近,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光.才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "5.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队",
                    "6.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的",
                    "7.三月到大理赏樱花不远不近,又近",
                    "3.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆",
                    "4.三月到大理赏樱花不远不近,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光.才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "5.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队",
                    "2.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光",
                    "3.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆",
                    "1.三月到大理赏樱花不远不近,在部队那些日子被遗忘,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光v,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "2.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光",
                    "3.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆",
                    "4.三月到大理赏樱花不远不近,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光.才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "5.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队",
                    "6.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的",
                    "7.三月到大理赏樱花不远不近,又近",
                    "8.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "9.三月到大理赏樱花不远不近，才是最好离余生，请带上自己的回忆",
                    "3.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆",
                    "4.三月到大理赏樱花不远不近,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光.才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "5.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队",
                    "6.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的",
                    "7.三月到大理赏樱花不远不近,又近",
                    "3.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆",
                    "4.三月到大理赏樱花不远不近,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光.才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "5.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队",
                    "2.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光",
                    "3.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆",
                    "1.三月到大理赏樱花不远不近,在部队那些日子被遗忘,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光v,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "2.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光",
                    "3.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆",
                    "4.三月到大理赏樱花不远不近,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光.才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "5.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队",
                    "6.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的",
                    "7.三月到大理赏樱花不远不近,又近",
                    "8.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "9.三月到大理赏樱花不远不近，才是最好离余生，请带上自己的回忆",
                    "3.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆",
                    "4.三月到大理赏樱花不远不近,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光.才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "5.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队",
                    "6.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的",
                    "7.三月到大理赏樱花不远不近,又近",
                    "3.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆",
                    "4.三月到大理赏樱花不远不近,才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光.才是最好的距离余生，请带上自己的阳光回忆遗忘的花儿春光",
                    "5.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队",
                    "2.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光",
                    "3.三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆",
                ]
            }
        },
        methods: {
            getBodyWidth() {
                return document.body.clientWidth || document.body.offsetWidth || document.body.scrollWidth;
            },
            getWidth(e) {
                return e.split('px')[0];
            },
            changePosition() {
                //列值
                let column = 3;
                //窗口可视宽度
                let width = this.getBodyWidth();
                //获取元素高度，用于下级元素top值
                let heightTopArray = [];

                for (let i = 0; i < this.list.length; i++) {

                    //设置元素宽度
                    let refName = 'refValue' + i;

                    if (!this.$refs[refName][0]) {
                        setTimeout(() => {
                            this.changePosition();
                        }, 200);
                    };

                    this.$refs[refName][0].style.width = width / column + 'px';

                    /***设置top值**/
                    /***设置left值**/
                    /***第一行***/
                    if (i < column) {
                        this.$refs[refName][0].style.top = '0px';
                        this.$refs[refName][0].style.left = this.getWidth(this.$refs[refName][0].style.width) *
                            i + 'px';
                        heightTopArray.push(this.$refs[refName][0].clientHeight);

                        /***其他行***/
                    } else {
                        //余数==》横向索引
                        let mod = i % column;

                        this.$refs[refName][0].style.top = heightTopArray[mod] + 'px';
                        //更新top值
                        heightTopArray[mod] = heightTopArray[mod] + this.$refs[refName][0].clientHeight;

                        this.$refs[refName][0].style.left = this.getWidth(this.$refs[refName][0].style.width) *
                            mod + 'px';
                    }

                }
            }

        },
        created() {
            this.list = this.textList;
        },
        mounted() {
            window.onload = () => {
                this.changePosition();
            };

            window.onresize = () => {
                this.changePosition();
            }
        },
    })
</script>

</html>